<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>record</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/template.css" media="all">
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<style>
    .header {
        position: absolute;
        top: 0px;
        height: auto;
        width: 100%;
    }

    .middle_outer {
        position: absolute !important;
        position: relative;
        top: 76px !important;
        top: 0px;
        bottom: 55px;
        width: 100%;
        overflow: hidden;
        height: auto !important;
        height: 100%;
    }

    .middle_inner {
        height: 100%;
        overflow-y: auto;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
    }

    .middle_inner::-webkit-scrollbar {
        width: 0 !important;
    }
</style>
<body>

    <div style=" overflow: hidden;">
        <div class='header' style="padding: 30px;">
            <div style="background-color: lightseagreen;width: 100%; height: 40px; margin-bottom: 20px; text-align: center;" >
                <img src="${requestScope.friend.image}" style="width: 30px ;height: 30px ; border-radius: 50%">
                <span style="color: wheat; font-size:20px ;line-height: 40px;margin-left: 20px;">${requestScope.friend.username}</span>
            </div>
        </div>
        <div class='middle_outer'>
            <div class='middle_inner' id="test">
                <div style="padding: 10px 30px;">
                    <!-- 对方消息-->
                    <c:forEach var="message" items="${requestScope.message}">
                        <c:if test="${message.fromId==requestScope.friend.uid}">
                    <div class="clearfix">
                        <div style="display: inline;">
                            <div style="float: left;">
                                <div style="margin:0px 15px;"><!-- 个人信息 -->
                                    <img src="${requestScope.friend.image}" height="46px" width="46px" height="46px"  style="border-radius: 50%;">
                                </div>
                            </div>
                            <div class="alert alert-success" role="alert" style="width: 70%; float: left;">
							<span>
								${message.content}
							</span>
                            </div>
                        </div>
                    </div>
                        </c:if>
                    <!-- 自己消息 -->
                        <c:if test="${message.fromId==requestScope.my.uid}">
                    <div class="clearfix">
                        <div style="display: inline;">
                            <div style="float: right;">
                                <div><!-- 个人信息 -->
                                    <div style="margin:0px 15px;"><!-- 个人信息 -->
                                        <img src="${requestScope.my.image}" height="46px" width="46px"  style="border-radius: 50%;">
                                    </div>
                                </div>
                            </div>
                            <div class="alert alert-warning" role="alert" style="width: 70%; float: right;">
							<span>
								${message.content}
							</span>
                            </div>
                        </div>
                    </div>
                    </c:if>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
